<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>康建辉个人网站</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>

    <!-- 导航菜单 -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top py-3">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#" style="padding-top: 15px; font-size: 20px;">
                <i class="bi bi-globe-americas me-2"></i>康建辉个人网站
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#wen1">什么是 BootStrap</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#wen2">BootStrap提供的功能有哪些</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#wen3">BootStrap实现响应式布局的思想是什么</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#wen4">BootStrap提供的组件</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#wen5">什么是断点？</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#wen6">如何设计页面元素在某一尺寸下隐藏</a>
                    </li>
                </ul>
                <!-- <input class="form-control me-2 px-1" type="search" placeholder="Search" aria-label="Search"
                    style="width: 50px;"> -->
                <button class="btn btn-outline-light ms-lg-3">立即查找</button>
            </div>
        </div>
    </nav>

    <!-- 轮播图/走马灯 -->
    <div id="destinationCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#destinationCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#destinationCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#destinationCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./img/dao2.jpeg" class="d-block w-100" style="height: 600px; object-fit: cover;">
                <div class="carousel-caption d-none d-md-block">
                    <h2>bootstrap框架</h2>
                    <p>体验bootstrap框架的魅力与神秘</p>
                    <button class="btn btn-primary btn-lg mt-2">了解更多</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./img/dao1.jpeg" class="d-block w-100" style="height: 600px; object-fit: cover;">
                <div class="carousel-caption d-none d-md-block">
                    <h2>jquery的探索</h2>
                    <p>感受jquery的魅力与浪漫</p>
                    <button class="btn btn-primary btn-lg mt-2">了解更多</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="./img/dao3.jpeg" class="d-block w-100" style="height: 600px; object-fit: cover;">
                <div class="carousel-caption d-none d-md-block">
                    <h2>基于bootstrap的ui框架有哪些</h2>
                    <p>沉浸bootstrap的ui框架</p>
                    <button class="btn btn-primary btn-lg mt-2">了解更多</button>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#destinationCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#destinationCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- 答题过程 -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">我的答题</h2>
                <!-- <p class="text-muted">----------------</p> -->
                <div class="mx-auto border-bottom border-primary" style="width: 100px;"></div>
            </div>

            <div class="row g-4 text-center">
                <div class="col-md-4">
                    <div class="p-4 bg-white rounded shadow-sm">
                        <i class="bi bi-geo-alt feature-icon"></i>
                        <h4 id="wen1">什么是 BootStrap</h4>
                        <p>Bootstrap 是一个开源的前端框架，用于快速开发和设计响应式网站和 Web 应用程序。它最初由 Twitter 的开发者创建，现在由一个活跃的社区维护。</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="p-4 bg-white rounded shadow-sm">
                        <i class="bi bi-geo-alt feature-icon"></i>
                        <h4 id="wen2">BootStrap提供的功能有哪些</h4>

                        <p>Bootstrap 提供了丰富的功能，帮助开发者快速构建响应式、现代化的网页和 Web 应用。</p>
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                以下是 Bootstrap 提供的主要功能：
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <li><a class="dropdown-item" href="#">1. 响应式网格系统</a></li>
                                <li><a class="dropdown-item" href="#">2. 预置样式组件</a></li>
                                <li><a class="dropdown-item" href="#">3. 实用工具类（Utility Classes）</a></li>
                                <li><a class="dropdown-item" href="#">4. JavaScript 交互组件</a></li>
                                <li><a class="dropdown-item" href="#">5. 响应式图片 & 图标</a></li>
                                <li><a class="dropdown-item" href="#">7. 浏览器兼容性</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="p-4 bg-white rounded shadow-sm">
                        <i class="bi bi-geo-alt feature-icon"></i>
                        <h4 id="wen3">BootStrap实现响应式布局的思想是什么</h4>
                        <p>Bootstrap 实现响应式布局的核心思想是 "移动优先"（Mobile First） 和 "断点驱动"（Breakpoint-Driven） 的设计理念，
                        </p>
                        <p>
                            <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button"
                                aria-expanded="false" aria-controls="collapseExample">
                                主要通过以下关键技术实现：
                            </a>

                        </p>
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <p>1. 移动优先（Mobile First）</p>
                                <p>2. 断点系统（Breakpoints）</p>
                                <p>3. 流体网格系统（Fluid Grid）</p>
                                <p>4. 响应式工具类</p>
                                <p>5. 响应式媒体</p>
                                <p>设计哲学
                                    内容优先：布局应适应内容而非设备
                                    渐进增强：从小屏幕开始，逐步增加大屏优化
                                    原子化CSS：通过组合工具类快速构建界面
                                    Bootstrap 的响应式思想已被现代前端开发广泛采纳，即使不使用 Bootstrap，许多框架（如 Tailwind CSS）也遵循类似的断点设计模式。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- 我的答题 -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">我的答题</h2>

                <div class="mx-auto border-bottom border-primary" style="width: 100px;"></div>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="testimonial-card">
                        <div class="d-flex align-items-center mb-3">
                            <img src="./img/tou.png" class="rounded-circle me-3" width="60" alt="用户">
                            <div>
                                <h5 class="mb-0" id="wen4">BootStrap提供的组件</h5>
                                <div class="text-warning">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                            </div>
                        </div>
                        <p class="mb-0">"Bootstrap 提供了丰富的 预构建组件，可以直接在项目中使用，减少开发时间。"</p>
                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                以下是 Bootstrap 提供的主要组件分类和示例：
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <li><a class="dropdown-item" href="#">1. 布局与导航组件</a></li>
                                <li><a class="dropdown-item" href="#">2. 内容展示组件</a></li>
                                <li><a class="dropdown-item" href="#">3. 表单组件</a></li>
                                <li><a class="dropdown-item" href="#">4. 提示与交互组件</a></li>
                                <li><a class="dropdown-item" href="#">5. 其他实用组件</a></li>

                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="testimonial-card">
                        <div class="d-flex align-items-center mb-3">
                            <img src="./img/tou.png" class="rounded-circle me-3" width="60" alt="用户">
                            <div>
                                <h5 class="mb-0" id="wen5">什么是断点？</h5>
                                <div class="text-warning">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                            </div>
                        </div>
                        <p class="mb-0">"在响应式设计中，断点（Breakpoint） 是指
                            特定的屏幕宽度阈值，当浏览器窗口达到这些阈值时，网页的布局或样式会发生变化，以适应不同设备（如手机、平板、电脑）的显示效果。"</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="testimonial-card">
                        <div class="d-flex align-items-center mb-3">
                            <img src="./img/tou.png" class="rounded-circle me-3" width="60" alt="用户">
                            <div>
                                <h5 class="mb-0" id="wen6">如何设计页面元素在某一尺寸下隐藏</h5>
                                <div class="text-warning">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                            </div>
                        </div>
                        <p class="mb-0">"在响应式设计中，可以通过 CSS 媒体查询（Media Queries） 或 Bootstrap 工具类
                            控制页面元素在特定屏幕尺寸下隐藏。以下是具体实现方法："</p>
                        <div class="accordion" id="accordionExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                        方法 1：使用 Bootstrap 内置工具类（推荐）
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <strong>Bootstrap 提供了一套响应式工具类，可直接通过 HTML 类名控制元素的显示/隐藏：</strong><br />
                                        <ul>
                                            <li>{断点}：sm (≥576px)、md (≥768px)、lg (≥992px)、xl (≥1200px)、xxl (≥1400px)</li>
                                            <li>{显示方式}：none：隐藏/block / inline / flex 等：显示</li>
                                        </ul>

                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        方法 2：自定义 CSS 媒体查询
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <strong>如果需要更精细的控制，可以手动编写媒体查询：</strong><br />
                                        /* 在小于 768px 时隐藏 */
                                        @media (max-width: 767.98px) {
                                        .custom-hide-mobile {
                                        display: none !important;
                                        }
                                        }

                                        /* 在大于等于 1200px 时隐藏 */
                                        @media (min-width: 1200px) {
                                        .custom-hide-desktop {
                                        display: none !important;
                                        }
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#collapseThree" aria-expanded="false"
                                        aria-controls="collapseThree">
                                        方法 3：结合 Bootstrap 断点变量（Sass/Less）
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse"
                                    aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <strong>如果使用 Sass/Less，可以复用 Bootstrap 的断点变量：</strong><br />
                                        <code>// 引入 Bootstrap 变量
                                            @import "bootstrap/scss/functions";
                                            @import "bootstrap/scss/variables";
                                            @import "bootstrap/scss/mixins";
                                            
                                            // 自定义类：在 md 断点以下隐藏
                                            .custom-hide-below-md {
                                              @include media-breakpoint-down(md) { // max-width: 767.98px
                                                display: none !important;
                                              }
                                            }</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 固定在右下角的返回首页按钮 -->
    <button class="fixed-home-btn btn btn-primary" id="btnFan" title="返回首页">
        <i class="bi bi-house-door"></i>
    </button>




    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <script>

        // 导航栏滚动效果
        window.addEventListener('scroll', function () {

            const navbar = document.querySelector('.navbar');
            if (window.scrollY == 0) {
                navbar.classList.remove('bg-primary')
            } else {
                navbar.classList.add('bg-primary')
            }

            if (window.scrollY > 50) {
                navbar.classList.add('navbar-scrolled');
            } else {
                navbar.classList.remove('navbar-scrolled');
            }
        });

        // 轮播图自动播放
        const myCarousel = document.querySelector('#destinationCarousel');
        const carousel = new bootstrap.Carousel(myCarousel, {
            interval: 2000,
            wrap: true
        });

        document.getElementById('btnFan').addEventListener('click', function () {
            window.location.href = '../works.html';
        });
    </script>
</body>

</html>